<template lang="">
  <div>
    <div class="title">
      <img src="@/assets/images/appItem8.png" alt="" />
      <span>综合素质评价</span>
    </div>
    <div class="lunbo">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="imgs">
            <img src="@/assets/images/detailImg.png" alt="" />
            <img src="@/assets/images/detailImg.png" alt="" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="detail">
      <div class="title1">
        <img src="@/assets/images/appItem8.png" alt="" />
        <span>应用详情</span>
      </div>
      <div class="info">
        应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述应用详情描述
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="item">
          <span class="lable">开发者：</span>
          <span class="info">杭州领航启学科技有限公司</span>
        </div>
        <div class="item">
          <span class="lable">支持终端：</span>
          <span class="info">PC端、移动端</span>
        </div>
        <div class="item">
          <span class="lable">适用群体：</span>
          <span class="info">学校</span>
        </div>
        <div class="item">
          <span class="lable">应用分类：</span>
          <span class="info">教学管理</span>
        </div>
        <div class="item">
          <span class="lable">上架时间：</span>
          <span class="info">2025.10.10</span>
        </div>
      </div>
      <div class="right">
        <div class="left-item">
          <div>添加到我的应用</div>
          <div class="button">添加</div>
        </div>
        <img src="@/assets/images/detailRight.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style>
.el-carousel__container {
  height: 472px;
}
</style>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 700;
  color: #1981ff;
  img {
    width: 48px;
    height: 48px;
    margin-right: 14px;
  }
}
.lunbo {
  box-sizing: border-box;
  width: 1618px;
  height: 472px;
  padding: 20px 30px;
  margin: auto;
  background: linear-gradient(180deg, #e8f2ff 0%, #ffffff 100%);
  border: 1px solid #e8f2ff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  .imgs {
    display: flex;
    gap: 36px;
    img {
      width: 761px;
      height: 413px;
      border-radius: 10px;
    }
  }
}
.detail {
  box-sizing: border-box;
  width: 1618px;
  padding: 20px 30px 68px;
  margin: 31px auto;
  background-color: #e8f2ff;
  border-radius: 10px;
  .title1 {
    display: flex;
    align-items: center;
    margin-bottom: 21px;
    font-size: 18px;
    font-weight: 700;
    color: #3963a6;
    img {
      width: 24px;
      height: 24px;
    }
  }
  .info {
    font-size: 16px;
    color: #4a5463;
  }
}
.bottom {
  display: flex;
  justify-content: space-between;
  width: 1618px;
  margin: 31px auto;
  .left,
  .right {
    box-sizing: border-box;
    width: 796px;
    height: 300px;
    background-color: #e8f2ff;
    border-radius: 10px;
  }
  .left {
    padding: 30px;
    color: #3963a6;
    .item {
      margin-bottom: 20px;
    }
    .lable {
      margin-right: 10px;
      font-size: 18px;
      font-weight: 700;
    }
    .info {
      font-size: 18px;
    }
  }
  .right {
    display: flex;
    justify-content: space-between;
    padding: 0 34px 0 50px;
    background-color: #eff5ff;
    .left-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 36px;
      font-weight: 700;
      color: #2e7dbd;
      .button {
        width: 270px;
        height: 46px;
        margin-top: 54px;
        font-size: 18px;
        line-height: 46px;
        color: #ffffff;
        text-align: center;
        background: linear-gradient(0deg, #ffc341 0%, #ff8b18 100%);
        border-radius: 20px;
      }
      img {
        width: 300px;
        height: 300px;
      }
    }
  }
}
</style>
